<template>
    <div class="Prac1">
        <h1>vue页面练习~</h1>
        <table align="center" border="box" style="font-size: 20px;" cellpadding="10px" cellspacing="0px">
            <tr>
                <th>radio</th>
                <td>男：<input type="radio" id="male" value="男" v-model="sex"></td>
                <td>女：<input type="radio" id="female" value="女" v-model="sex"></td>
            </tr>
            <tr>
                <th>checkbox</th>
                <td>
                    <input type="checkbox" id="agree" v-model="isAgree">同意
                </td>
                <td>
                    <input type="checkbox" id="agree" v-model="isAgree" disabled>不同意
                </td>
            </tr>
            <tr>
                <th>checkbox2:</th>
                <td>
                    <input type="checkbox" id="ok" value="ok" v-model="isOK">好
                </td>
                <td>
                    <input type="checkbox" id="no" value="no" v-model="isOK">不好
                </td>
            </tr>
            <tr>
                <th>select</th>
                <td>
                    <select v-model="city">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="四川">四川</option>
                    </select>
                </td>
                <td>
                    <!-- v-model写在select里,data属性对应option的value -->
                    <select v-model="city" disabled>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="四川">四川</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name: 'Prac1',
    data() {
        return {
            sex: '女',//默认值
            isAgree: true,//默认选中
            isOK: ['ok', 'no'],//数组存放对应value数值
            city: '四川',
        }
    },
}
</script>

<style>
</style>